import Base from "../base.js";
//引入请求
import MoviesApi from "../../api/movies.js"
//获取token令牌
import UsersApi from "../../api/admin.js"
export default class extends Base {
    constructor(propy) {
        super(propy);
        this.data = {
            movie: {
                _id: propy._id,// 获取需要上传图片的电影id 
            },
        };

    };
    render() {
        this.$el.html(`
        <div style="margin-top:2px;">
            <a href="/#/info/movies" style="font-size:16px;">电影列表</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
            <a href="/#/info/updateMovies" style="font-size:16px;">上传图片</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
        </div>
           <div style="text-aling:center;margin:0 30px 0 30px">
              <h1  style="width:330px;margin:auto;font-size:40px;font-weight:bold;margin-top:50px;">电 影 图 片 管 理<h1/>
                <table class="layui-table" style="margin-top:80px;margin-bottom:150px;">
                    <tr style="height:100px;">
                       <td style="width:120px;font-size:20px;font-weight:bold;">电影名称</td>
                        <td class="movie-name" style="font-size:30px;padding-left:30px"></td>
                        <td style="font-size:20px;text-align:center;width:50px;font-weight:bold;">操作</td>
                    </tr>
                    <tr style="height:200px">
                       <td style="font-size:20px;font-weight:bold;">海报列表</td>
                       <td class="posterMovie"></td>
                       <td><button type="button" class="layui-btn" id="upload-poster">
                       <i class="layui-icon">&#xe67c;</i>电影海报
                      </button></td>
                    </tr>        
                    <tr  style="height:200px;">
                       <td style="font-size:20px;font-weight:bold;">剧集列表图片</td>
                       <td class="imagesMovies"></td>
                       <td>
                        <button type="button" class="layui-btn" id="upload-btn">
                          <i class="layui-icon">&#xe67c;</i>上传剧集图片
                       </button>
                      </td>
                    </tr>             
                </table>
               
            <div/>`
        );

        //获取需要渲染海报节点
        this.$imgsEle = $(".imagesMovies");
        this.$posterEle = $(".posterMovie")
    }

    // 再次渲染让用户的数据和电影的海报渲染到页面
    rerender() {
        $(".movie-name").html(`${this.data.movie.name}`);
        // 渲然剧集
        const imgStr = _.map(this.data.movie.images, item => {
            return `<img style="width:200px;margin:15px" src="/resource${item}" />`
        }).join("");
        this.$imgsEle.html(imgStr);
        // 渲染海报
        // console.log(this.data.movie);
        const PosterStr = _.map(this.data.movie.poseter, item => {
            console.log(item);
            return `<img style="width:200px;margin:15px" src="/resource${item}" />`
        }).join("");
        this.$posterEle.html(PosterStr);


    }
    //删除电影剧集图片事件
    delete(e) {
        this.layer.confirm(`是否确定删除`, async (index) => {
            const { _id } = this.data.movie;
            //jQuery的replace方法，如有字符串的参1，则替换成参2
            const url = $(e.target).attr("src").replace("/resource", "");
            const token = UsersApi.getToken(); //获取token
            this.data.movie = await MoviesApi.deleteImg({ _id, url, token });
            this.rerender();
            this.layer.close(index);//关闭弹出层
        })
    }
    //删除电影海报事件
    deletePoster(e) {
        this.layer.confirm(`是否确定删除`, async (index) => {
            const { _id } = this.data.movie;
            //jQuery的replace方法，如有字符串的参1，则替换成参2
            const url = $(e.target).attr("src").replace("/resource", "");
            const token = UsersApi.getToken(); //获取token
            this.data.movie = await MoviesApi.deletePoster({ _id, url, token });
            this.rerender();
            this.layer.close(index);//关闭弹出层
        })
    }


    // 添加事件
    handle() {
        // 引入layui
        this.upload = layui.upload;
        // 上传剧集
        this.upload.render({
            elem: '#upload-btn',//绑定元素
            url: '/resource/movies/uploadMovies/',//上传接口 
            data: {
                _id: () => {
                    return this.data.movie._id; //拿到电影数据的id
                },
                token: UsersApi.getToken(),
            }
            , multiple: true  //开启允许多文件上传
            // 上传成功之后对回调函数
            , done: res => {
                //上传完毕回调
                this.data.movie = res;
                this.rerender();
            }
            , error: function () {
                //请求异常回调
            }
        });
        // 上传海报
        this.upload.render({
            elem: '#upload-poster',//绑定元素
            url: '/resource/movies/uploadPoster/',//上传接口 
            data: {
                _id: () => {
                    return this.data.movie._id; //拿到电影数据的id
                },
                token: UsersApi.getToken(),
            
            }
            , multiple: true  //开启允许多文件上传
            // 上传成功之后对回调函数
            , done: res => {
                //上传完毕回调
                this.data.movie = res;
                this.rerender();
            }
            , error: function () {
                //请求异常回调
            }
        });
        //获取到删除图片节点绑定事件
        this.$imgsEle.on("click", "img", this.delete.bind(this));
        this.$posterEle.on("click", "img", this.deletePoster.bind(this));

    };

    // 获取需要上传信息的电影数据
    async getOne() {
        const { _id } = this.data.movie;
        this.data.movie = await MoviesApi.getOne(_id);
    }

    //render渲染完成 页面有真实节点
    async mounted() {
        // 通过_id查找整条数据并赋值给this.data.movie,并重新渲染姓名到页面
        this.data.movie = await MoviesApi.findOne(this.data.movie._id);
        this.rerender();
    }

}